<template>
  <view>
    <!-- Trigger Button (for demo purposes) -->
    <!-- <view 
      @click="openModal" 
      class="bg-orange-500 text-white px-4 py-2 rounded-lg"
    >
      查看商品详情
    </view> -->

    <!-- Modal Backdrop -->
    <view
      v-if="isOpen"
      class="fixed inset-0 bg-black/60 z-40 transition-opacity duration-300"
      :class="isOpen ? 'opacity-100' : 'opacity-0'"
      @click="closeModal"
    ></view>

    <!-- Product Detail Modal -->
    <view
      class="fixed left-0 right-0 bottom-0 z-50 bg-white rounded-t-2xl transition-transform duration-300 ease-out"
      :class="isOpen ? 'translate-y-0' : 'translate-y-full'"
      :style="{ height: '80vh' }"
    >
      <!-- Close Button -->
      <view @click="closeModal" class="absolute right-4 top-4 z-10 p-1 rounded-full bg-gray-100">
        <X class="w-5 h-5 text-gray-700" />
      </view>

      <!-- Scrollable Content -->
      <view class="h-full overflow-y-auto pb-20">
        <!-- Product Carousel -->
        <view class="relative">
          <view class="carousel-container">
            <view
              class="carousel-slides flex transition-transform duration-300 ease-in-out"
              :style="{ transform: `translateX(-${activeSlide * 100}%)` }"
            >
              <view
                v-for="(image, index) in product.images"
                :key="index"
                class="carousel-slide w-full flex-shrink-0"
              >
                <image
                  :src="image"
                  :alt="`Product image ${index + 1}`"
                  class="w-full h-64 object-cover"
                />
              </view>
            </view>

            <!-- Carousel Indicators -->
            <view class="absolute bottom-2 left-0 right-0 flex justify-center space-x-2">
              <view
                v-for="(image, index) in product.images"
                :key="index"
                class="w-2 h-2 rounded-full transition-colors"
                :class="activeSlide === index ? 'bg-orange-500' : 'bg-white/70'"
                @click="setActiveSlide(index)"
              ></view>
            </view>

            <!-- Image Counter -->
            <view
              class="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
            >
              {{ activeSlide + 1 }}/{{ product.images.length }}
            </view>
          </view>
        </view>

        <!-- Product Basic Info -->
        <view class="p-4">
          <view class="flex items-start justify-between">
            <view class="text-xl font-bold text-gray-800 mr-4">{{ product.name }}</view>
            <view class="p-1">
              <Heart class="w-5 h-5 text-gray-400" />
            </view>
          </view>

          <!-- Store Info -->
          <view class="flex items-center mt-2">
            <Store class="w-4 h-4 text-gray-500 mr-1" />
            <text class="text-sm text-gray-600">{{ product.storeName }}</text>
          </view>

          <!-- Price Info -->
          <view class="mt-3 flex items-baseline">
            <text class="text-xs text-orange-500 mr-0.5">¥</text>
            <text class="text-2xl font-bold text-orange-500">{{ product.price }}</text>
            <text class="text-sm text-gray-400 line-through ml-2">
              ¥{{ product.originalPrice }}
            </text>
            <text class="ml-2 px-1.5 py-0.5 bg-orange-100 text-orange-500 text-xs rounded">
              {{ product.discount }}折
            </text>
          </view>

          <!-- Sales & Promotion Timer -->
          <view class="mt-2 flex justify-between items-center">
            <text class="text-sm text-gray-500">已售 {{ product.sales }} 件</text>
            <view class="flex items-center text-sm">
              <Clock class="w-4 h-4 text-orange-500 mr-1" />
              <text class="text-orange-500">优惠剩余: {{ promotionTimeRemaining }}</text>
            </view>
          </view>
        </view>

        <!-- Divider -->
        <view class="h-2 bg-gray-100"></view>

        <!-- Tab Navigation -->
        <view class="border-b border-gray-200">
          <view class="flex">
            <view
              v-for="(tab, index) in tabs"
              :key="index"
              class="flex-1 py-3 text-center text-sm font-medium relative"
              :class="activeTab === index ? 'text-orange-500' : 'text-gray-600'"
              @click="activeTab = index"
            >
              {{ tab }}
              <view
                v-if="activeTab === index"
                class="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500"
              ></view>
            </view>
          </view>
        </view>

        <!-- Tab Content -->
        <view class="p-4">
          <!-- Product Details -->
          <view v-if="activeTab === 0">
            <view class="font-bold text-gray-800 mb-3">商品详情</view>
            <view class="space-y-4">
              <view class="text-gray-700">{{ product.description }}</view>
              <image
                v-for="(detailImage, index) in product.detailImages"
                :key="index"
                :src="detailImage"
                :alt="`Product detail ${index + 1}`"
                class="w-full rounded-lg"
              />
            </view>
          </view>

          <!-- Purchase Information -->
          <view v-if="activeTab === 1">
            <view class="font-bold text-gray-800 mb-3">购买须知</view>
            <view class="space-y-3">
              <view v-for="(info, index) in product.purchaseInfo" :key="index">
                <view class="font-medium text-gray-800">{{ info.title }}</view>
                <view class="text-sm text-gray-600 mt-1">{{ info.content }}</view>
              </view>
            </view>
          </view>

          <!-- User Reviews -->
          <view v-if="activeTab === 2">
            <view class="flex justify-between items-center mb-3">
              <view class="font-bold text-gray-800">用户评价 ({{ product.reviews.length }})</view>
              <text class="text-sm text-orange-500">好评率 {{ product.positiveRate }}</text>
            </view>

            <view class="space-y-4">
              <view
                v-for="(review, index) in product.reviews"
                :key="index"
                class="border-b border-gray-100 pb-4 last:border-0"
              >
                <view class="flex items-center">
                  <image
                    :src="review.avatar"
                    :alt="review.username"
                    class="w-8 h-8 rounded-full object-cover"
                  />
                  <view class="ml-2">
                    <view class="text-sm font-medium text-gray-800">{{ review.username }}</view>
                    <view class="flex items-center">
                      <view class="flex">
                        <Star
                          v-for="i in 5"
                          :key="i"
                          class="w-3 h-3"
                          :class="i <= review.rating ? 'text-orange-400' : 'text-gray-300'"
                        />
                      </view>
                      <text class="text-xs text-gray-500 ml-1">{{ review.date }}</text>
                    </view>
                  </view>
                </view>
                <view class="text-sm text-gray-700 mt-2">{{ review.content }}</view>
                <view v-if="review.images && review.images.length > 0" class="flex mt-2 space-x-2">
                  <image
                    v-for="(image, imgIndex) in review.images"
                    :key="imgIndex"
                    :src="image"
                    :alt="review.username"
                    class="w-16 h-16 object-cover rounded"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Fixed Bottom Action Bar -->
      <view
        class="fixed bottom-custom left-0 right-0 bg-white border-t border-gray-200 p-3 flex items-center z-10"
      >
        <view class="flex flex-col items-center justify-center w-12 mr-3">
          <Share2 class="w-5 h-5 text-gray-600" />
          <text class="text-xs text-gray-600 mt-1">分享</text>
        </view>

        <view class="flex-1 bg-orange-500 text-center text-white py-3 rounded-full font-medium">
          立即购买
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { X, Heart, Store, Clock, Star, Share2 } from 'lucide-vue-next'

// Modal state
const isOpen = ref(false)

const openModal = () => {
  isOpen.value = true
  // #ifdef H5
  document.body.style.overflow = 'hidden' // Prevent background scrolling
  // #endif
}

const closeModal = () => {
  isOpen.value = false
  // #ifdef H5

  document.body.style.overflow = '' // Restore scrolling
  // #endif
}

// Product carousel
const activeSlide = ref(0)

const setActiveSlide = (index) => {
  activeSlide.value = index
}

// Tab navigation
const tabs = ['商品详情', '购买须知', '用户评价']
const activeTab = ref(0)

// Promotion countdown
const promotionTimeRemaining = ref('23:59:59')
let countdownInterval = null

const startCountdown = () => {
  // Set end time to 24 hours from now for demo
  const endTime = new Date()
  endTime.setHours(endTime.getHours() + 23)
  endTime.setMinutes(endTime.getMinutes() + 59)
  endTime.setSeconds(endTime.getSeconds() + 59)

  countdownInterval = setInterval(() => {
    const now = new Date()
    const diff = endTime - now

    if (diff <= 0) {
      clearInterval(countdownInterval)
      promotionTimeRemaining.value = '00:00:00'
      return
    }

    const hours = Math.floor(diff / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    const seconds = Math.floor((diff % (1000 * 60)) / 1000)

    promotionTimeRemaining.value = `${hours.toString().padStart(2, '0')}:${minutes
      .toString()
      .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  }, 1000)
}

onMounted(() => {
  startCountdown()
})

onUnmounted(() => {
  if (countdownInterval) {
    clearInterval(countdownInterval)
  }
})

// Sample product data
const product = {
  name: '2023新款轻奢时尚女士手提包单肩包斜挎包',
  storeName: '轻奢时尚专营店',
  price: 299,
  originalPrice: 599,
  discount: 5,
  sales: 2356,
  images: [
    'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  ],
  description:
    '这款手提包采用高级PU材质，质感细腻，手感柔软，经久耐用。简约大气的设计风格，百搭不过时。内部空间宽敞，可轻松容纳手机、钱包、化妆品等日常用品。配有可拆卸肩带，可手提、单肩或斜挎，满足不同场合需求。',
  detailImages: [
    'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
  ],
  purchaseInfo: [
    {
      title: '发货说明',
      content: '订单支付成功后，48小时内发货（节假日顺延）。',
    },
    {
      title: '退换政策',
      content: '自收到商品之日起7天内，商品完好可申请无理由退换货。',
    },
    {
      title: '保修政策',
      content: '该商品提供30天保修服务，保修期内出现质量问题可联系客服处理。',
    },
    {
      title: '温馨提示',
      content: '商品图片为实物拍摄，因光线及显示器等原因可能与实物存在细微色差，请以实物为准。',
    },
  ],
  positiveRate: '98%',
  reviews: [
    {
      username: '时尚达人',
      avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      rating: 5,
      date: '2023-10-15',
      content: '包包质量非常好，款式时尚大气，容量也很大，很满意的一次购物体验！',
      images: [
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      ],
    },
    {
      username: '购物狂魔',
      avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      rating: 4,
      date: '2023-10-12',
      content:
        '包包做工精细，皮质摸起来很舒服，就是有点小味道，晾一晾就好了。总体来说还是很满意的。',
      images: [],
    },
    {
      username: '挑剔先生',
      avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      rating: 5,
      date: '2023-10-10',
      content: '给女朋友买的，她非常喜欢，颜色和图片一样，没有色差，值得推荐！',
      images: ['http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png'],
    },
  ],
}

defineExpose({
  openModal,
})
</script>

<style scoped>
/* Additional styles if needed */
.bottom-custom {
  bottom: var(--window-bottom);
}
</style>
